<template>
  <div class='pay-center'>
    <div class="pay-info">
      <span class="info">需支付金额</span>
      <div class="price-box">
        <span class="sup">¥</span>
        <span>{{feiPrice|price}}</span>
      </div>
    </div>
    <div class="pay-content">
      <ul class="pay-list">
        <li 
          class="pay-item" 
          v-for='(item,index) in payList'
          :class="[item.isUse?'use':'not-use',index==radioType?'active':'']"
          @click="changePayType(index)"
          :key='item.payType'>
          <div class="img-box">
            <span class="img" :class="item.payType"></span>
          </div>
          <div class="content">
              <div class="type">{{item.name}}</div>
              <div class="info">{{item.desc}}</div>
          </div>
        </li>
      </ul>
    </div>
    <div
      @click="goPay"
      class="btn">
      立即支付
    </div>
  </div>
</template>
<script type="text/javascript">
import utils from "@/util/util";
import Api from "@/util/api";
export default {
  data() {
    return {
      radioType:0,
      payList:[],
      orderInfo:null
    };
  },
  async mounted() {
    var {payType="H5",orderId,sourceFrom="goods"} = this.$route.query;
    if(!orderId){
      this.toast("订单ID参数不完整～");
      setTimeout(() => {
        this.$router.go(-1);
      }, 2000);
      return;
    }
    this.payType = payType;
    this.orderId = orderId;
    this.sourceFrom = sourceFrom;
    this.loading("请稍等...");
    await this.getOrderInfo();
    await this.getPayList();
    this.$vux.loading.hide();
  },
  methods:{
   async getPayList(){
      return this.post(Api.getCashierDesk,{
        platform:this.payType,
        id:this.orderId
      })
      .then((d)=>{
        this.$vux.loading.hide();
        if(d.code == 200){
          this.payList = d.data.list.filter((item)=>item.isVisible);
        }else if(d.code == 6666){
          this.toast(d.message);
          setTimeout(() => {
            this.$router.push(`/order-info?id=${this.orderId}`);
          }, 2000);
        }else{
          this.toast(d.message);
        }
      })
      .catch(()=>{
        this.toast("网络错误,请检查您的网络～");
      })
    },
    getOrderInfo(){
      return this.post(Api.checkOrder,{
        id: this.orderId,
        platform: this.payType,
      })
      .then((d)=>{
        this.orderInfo = d.data;
      })
      .catch(()=>{
        this.toast("网络或服务器错误！");
      })
    },
    changePayType(index){
      var item = this.payList[index];
      console.log(item);
      if(item.isUse){
        this.radioType = index;
      }
    },
    goPay(){
      var type = this.payList[this.radioType];
      if(type.payType == "CMBC"){
        this.$router.push(`/pay/cmbcPay?orderId=${this.orderId}&platform=${this.payType}&payType=CMBC`);
      }else if(type.payType == "WECHAT"){
        this.alert("抱歉，网页版花伴商城暂不支持差额支付，请您在“花伴商城PLUS”微信小程序中完成差额支付。");
      }else if(type.payType == "MSH"){
        this.$router.push(`/pay/msh-pay?orderId=${this.orderId}&tradeName=${this.orderInfo.goodsName}`);
      }else{
        this.toast("努力支持中～");
      }
    }
  },
  computed:{
    feiPrice(){
      var orderInfo = this.orderInfo || {};
        if(orderInfo.state == "UNPAY"){
          return orderInfo.payAmount;
        }else if(orderInfo.state == "UNDOWNPAY"){
          return orderInfo.downPayAmount;
        }
    }
  }
};
</script>
<style lang='less' rel='stylesheet/less'>
@import "../styles/theme.less";

.pay-center {
  background: #f2f2f2;
  height: 100%;
  width: 100%;
  font-family: @font-rl;
  .btn{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1rem;
    background-color: @app-color;
    color: #464646;
    font-size: .32rem;
    text-align: center;
    line-height: 1rem;
  }
  .pay-info {
    height: 1.92rem;
    display: flex;
    background-color: #ffffff;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .info {
      font-size: 0.28rem;
      color: #909090;
    }
    .price-box {
      color: #464646;
      font-size: 0.54rem;
      position: relative;
      padding-left: 0.2rem;
      .sup {
        font-size: 0.16rem;
        position: absolute;
        top: 0.16rem;
        left: 0;
      }
    }
  }
  .pay-content {
    margin-top: 0.18rem;
    .pay-list {
      padding: 0 0.3rem;
      background-color: #ffffff;
      .pay-item {
        height: 1rem;
        border-bottom: 0.01rem solid #f2f2f2;
        display: flex;
        &.not-use{
          opacity: 0.5;
        }
        &:last-child {
          border-bottom: 0px;
        }
        &::before{
          content: ' ';
          width: .3rem;
          height: .3rem;
          border: .01rem solid #BCBCBC;
          border-radius: 50%;
          align-self: center;
        }
        &.active::before{
          background-image: url("https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/pay_checked.png");
          background-size: 100%;
          border-color: #fff;
        }
        .img-box {
          height: 1rem;
          width: 1rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .img{
            width: .4rem;
            background-size: 100%;
          }
          .MSH{
            height: .4rem;
            background-image: url('https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/pay_msh.png');
          }
          .CMBC{
            height: .28rem;
            background-image: url("https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/xinyongicn.png")
          }
          .WECHAT{
            background-image: url('https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/wxicn.png');
            height: .37rem;
          }
        }
        .content {
          align-self: center;
          .type{
            /* ￥153.67 X 6期: */
            font-size: .26rem;
            color: #464646;
          }
          .info{
            font-size: .18rem;
            color: #909090;
          }
        }
      }
    }
  }
}
</style>
